<template>
  <div id="charts" style="width: 1000px;height: 600px;"></div>
</template>

<script>
  export default {
    name: "charts",
    mounted() {
      var dom=document.getElementById('charts');
      var chart=this.$echarts.init(dom);
      var builderJson = {
        "all": 10887,
        "charts": {
          "情感类": 6237,
          "生活技巧类": 4822,
          "正能量类": 6005,
          "娱乐类":8782,
          "学习资源类":5875
        },
        "components": {
          "美食类": 6788,
          "搞笑类": 7575,
          "才艺类": 5400,
          "鬼畜类":6345
        },
        "ie": 9743
      };

      var downloadJson = {
        "00后": 3549,
        "90后": 2100,
        "80后": 1356,
        "70后": 700,
        "10后": 3333,
      };

      var themeJson = {
        "学习资源类": 3762,
        "美食类": 1023,
        "搞笑类": 2003,
        "才艺类":870,
        "鬼畜类":350,
        "情感类": 1200,
        "生活技巧类": 765,
        "正能量类":2045,
        "娱乐类":1768,
      };

      var waterMarkText = 'ECHARTS';

      var canvas = document.createElement('canvas');
      var ctx = canvas.getContext('2d');
      canvas.width = canvas.height = 100;
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      ctx.globalAlpha = 0.08;
      ctx.font = '20px Microsoft Yahei';
      ctx.translate(50, 50);
      ctx.rotate(-Math.PI / 4);
      ctx.fillText(waterMarkText, 0, 0);

      var option = {
        backgroundColor: {
          type: 'pattern',
          image: canvas,
          repeat: 'repeat'
        },
        tooltip: {},
        title: [{
          text: '视频点播量',
          subtext: '总计 ' + builderJson.all,
          left: '25%',
          textAlign: 'center'
        }, {
          text: '娱乐类各年龄段使用情况',
          /* subtext: '总计 ' + Object.keys(downloadJson).reduce(function (all, key) {
             return all + downloadJson[key];
           }, 0),*/
          left: '75%',
          textAlign: 'center'
        }, {
          text: '视频下载量',
          subtext: '总计 ' + Object.keys(themeJson).reduce(function (all, key) {
            return all + themeJson[key];
          }, 0),
          left: '75%',
          top: '50%',
          textAlign: 'center'
        }],
        grid: [{
          top: 50,
          width: '50%',
          bottom: '45%',
          left: 10,
          containLabel: true
        }, {
          top: '55%',
          width: '50%',
          bottom: 0,
          left: 10,
          containLabel: true
        }],
        xAxis: [{
          type: 'value',
          max: builderJson.all,
          splitLine: {
            show: false
          }
        }, {
          type: 'value',
          max: builderJson.all,
          gridIndex: 1,
          splitLine: {
            show: false
          }
        }],
        yAxis: [{
          type: 'category',
          data: Object.keys(builderJson.charts),
          axisLabel: {
            interval: 0,
            rotate: 30
          },
          splitLine: {
            show: false
          }
        }, {
          gridIndex: 1,
          type: 'category',
          data: Object.keys(builderJson.components),
          axisLabel: {
            interval: 0,
            rotate: 30
          },
          splitLine: {
            show: false
          }
        }],
        series: [{
          type: 'bar',
          stack: 'chart',
          z: 3,
          label: {
            position: 'right',
            show: true
          },
          data: Object.keys(builderJson.charts).map(function (key) {
            return builderJson.charts[key];
          })
        }, {
          type: 'bar',
          stack: 'chart',
          silent: true,
          itemStyle: {
            color: '#eee'
          },
          data: Object.keys(builderJson.charts).map(function (key) {
            return builderJson.all - builderJson.charts[key];
          })
        }, {
          type: 'bar',
          stack: 'component',
          xAxisIndex: 1,
          yAxisIndex: 1,
          z: 3,
          label: {
            position: 'right',
            show: true
          },
          data: Object.keys(builderJson.components).map(function (key) {
            return builderJson.components[key];
          })
        }, {
          type: 'bar',
          stack: 'component',
          silent: true,
          xAxisIndex: 1,
          yAxisIndex: 1,
          itemStyle: {
            color: '#eee'
          },
          data: Object.keys(builderJson.components).map(function (key) {
            return builderJson.all - builderJson.components[key];
          })
        }, {
          type: 'pie',
          radius: [0, '35%'],
          center: ['75%', '25%'],
          data: Object.keys(downloadJson).map(function (key) {
            return {
              name: key.replace('.js', ''),
              value: downloadJson[key]
            };
          })
        }, {
          type: 'pie',
          radius: [0, '35%'],
          center: ['75%', '75%'],
          data: Object.keys(themeJson).map(function (key) {
            return {
              name: key.replace('.js', ''),
              value: themeJson[key]
            };
          })
        }]
      };
      chart.setOption(option);


    }
  }
</script>

<style scoped>

</style>
